import React, { Component } from 'react'
import { NavBar, Icon, Carousel, Toast } from 'antd-mobile';
import "./GoodDetail.css"
import myaxios from "../../utils/myaxios"
export default class GoodDetail extends Component {
  state = {
    GoodInfo: {},
    imgHeight: 250,
    showSwiper: false,
    showCollect: false
  }

  componentDidMount() {
    let { goods_id } = this.props.match.params
    myaxios.get("goods/detail", {
      params: {
        goods_id
      }
    }).then((res) => {
      console.log(res)
      this.setState({
        GoodInfo: res,
        showSwiper: true
      })
    }).catch((err) => console.log(err))

    let collections_str = localStorage.getItem("collections")
    let collections = JSON.parse(collections_str || "[]")
    let index = collections.findIndex(v => {
      if (v.goods_id == goods_id) {
        return true
      }
    })
    if (index != -1) {
      this.setState({
        showCollect: true
      })
    }
  }
  // 收藏
  handleCollect = (params) => {
    let collections_str = localStorage.getItem("collections")
    let collections = JSON.parse(collections_str || "[]")
    let index = collections.findIndex(v => {
      if (v.goods_id == this.state.GoodInfo.goods_id) {
        return true;
      }
    })
    if (index != -1) {
      collections.splice(index, 1)
      Toast.info("取消收藏成功", 1)
      this.setState({
        showCollect: false
      })
    } else {
      Toast.info("收藏成功", 1)
      collections.push(this.state.GoodInfo)
      this.setState({
        showCollect: true
      })
    }
    localStorage.setItem("collections", JSON.stringify(collections))
  }

  // 添加购物车
  addToCArt = (parasm) => {
    let carts_str = localStorage.getItem("carts");
    let carts = JSON.parse(carts_str || "[]");
    let { goods_id } = this.props.match.params;
    let index = carts.findIndex(v => {
      if (v.goods_id == goods_id) {
        return true;
      }
    })

    if (index === -1) {
      let goods_info = this.state.GoodInfo
      goods_info.num = 1
      goods_info.checked = true
      carts.push(goods_info)
    } else {
      carts[index].num++
    }
    Toast.info("加入购物车成功", 1);
    localStorage.setItem("carts", JSON.stringify(carts));


  }
  //跳转到购物车页面
  gotoCart = (params) => {
    this.props.history.push("/cart")
  }
  //跳转到支付页面
    pay = (params) => {
      this.props.history.push("/Payment");
  }
  render() {
    return (
      <div className="GoodDetail">
        {/* 商品详情导航开始 */}
        <div className="GoodDetail-nav">
          <NavBar
            className="nav"
            mode="light"
            icon={<Icon type="left"></Icon>}
            onLeftClick={() => window.history.go(-1)}
          >商品详情</NavBar>
        </div>
        {/* 商品详情导航结束 */}
        {/* 商品详情轮播图开始 */}
        <div className="GoodDetail-swiper">
          {this.state.showSwiper && (
            <Carousel infinite autoplay={true} autoplay infinite>
              {this.state.GoodInfo.pics && this.state.GoodInfo.pics.map((v) => {
                return (
                  <div
                    key={v.goods_id}
                    className="imagerWrapper"
                    style={{
                      display: "inline-block",
                      with: "100%",
                      height: this.state.imgHeight
                    }}
                  >
                    <img
                      src={v.pics_mid}
                      alt=""
                      style={{ width: "100%", verticalAlign: "top" }}
                      onLoad={() => {
                        window.dispatchEvent(new Event("resize"))
                        this.setState({ imgHeight: "auto" })
                      }}

                    />
                  </div>
                )
              })}
            </Carousel>
          )}
        </div>
        {/* 商品详情轮播图结束 */}
        {/* 价格和分享开始 */}
        <div className="GoodDetail-share">
          <div className="share-left">
            <span className="left-price">¥{this.state.GoodInfo.goods_price}</span>
          </div>
          <div className="share-right">
            <i className="iconfont icon-fenxiang"></i>
            <i className={this.state.showCollect ? "iconfont icon-shoucang active" : "iconfont icon-shoucang"} onClick={this.handleCollect}></i>
          </div>
        </div>
        {/* 价格和分享结束 */}
        {/* 商品详情标题开始 */}
        <div className="GoodDetail-title">
          {this.state.GoodInfo.goods_name}
        </div>
        {/* 商品详情标题结束 */}
        {/* 商品详情图文开始 */}
        <div className="GoodDetail-details">
          <div className="details-title">图文详情</div>
          <div
            className="details-content"
            dangerouslySetInnerHTML={{ __html: this.state.GoodInfo.goods_introduce }}
          ></div>
        </div>
        {/* 商品详情图文结束 */}
        {/* 商品详情底部开始 */}
        <div className="GoodDetail-bottom">
          <div className="bottom-service">
            <i className="iconfont icon-lianxikefu"></i>
            <div>联系客服</div>
          </div>
          <div className="bottom-shopping" onClick={this.gotoCart}>
            <i className="iconfont icon-gouwuche"></i>
            <div>购物车</div>
          </div>
          <div className="bottom-AddCart" onClick={this.addToCArt}>
            <span className="AddCart">加入购物车</span>
          </div>
          <div className="bottom-purchase" onClick={this.pay}>
            <span className="purchase">立即购买</span>
          </div>
        </div>
        {/* 商品详情底部结束 */}
      </div>
    )
  }
}
